import {Badge, Card} from "antd";
import Meta from "antd/es/card/Meta";
import Avatar from "antd/es/avatar/avatar";
import React, {useEffect} from "react";

export default function ChatListBox(props) {
    let usersList = []
    // mounted hooks

    const changeChat = (user) => {
        // 设置当前senderTo
        props.setSendToUser(user)
        props.newMsgCountDown(user.name)
    }

    for (let user of props.users) {
        let stateBtnClassName = "chatApp_button_green_sm"
        if (user.state === 2) {
            stateBtnClassName = "chatApp_button_yellow_sm"
        } else if (user.state === 3) {
            stateBtnClassName = "chatApp_button_red_sm"
        }
        if (isNaN(props.newMsgCountMap[user.name])) {
            props.newMsgCountMap[user.name] = 0
        }
        usersList.push(
                <div className={user.name===props.sendToUser.name ? "chatApp_item curUser": "chatApp_item"}>
                    <Badge count={props.newMsgCountMap[user.name]} offset={[-12, 8]}>
                    <Card className={"chatApp_listItem"} onClick={()=>{
                        if (props.sendToUser.name === user.name) {
                            changeChat({})
                            return
                        }
                        changeChat(user)
                    }} bordered={true} size={"small"}>
                            <Meta
                                avatar={<Avatar src={user.avatar} />}
                                title={user.name}
                                description={user.dis !== "-1" ? user.dis + "米以内" : ""}
                            />
                        <span className={"chatApp_state"}>
                            <div className={user.dis === "-1" ? "" : stateBtnClassName}/>
                        </span>
                    </Card>
                    </Badge>
                </div>
        )
    }
    return (
        <div>
            {usersList.length === 0 ? <div>当前无人在线</div> : usersList}
        </div>
    );
}
